<template>
  <!--执行页-电话簿-发送短信 -->
  <section class="component send-message">
    <el-form
      ref="form"
      :rules="rules"
      label-width="120px"
      inline
      :model="model"
    >
      <el-form-item label="选择模板" prop="templateId">
        <el-select
          v-model="model.templateId"
          placeholder="请选择"
          clearable
          @change="onTemplateContentChange"
        >
          <el-option
            v-for="item in templateDataSet"
            :key="item.id"
            :label="item.templateName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板内容预览" prop="templateContent">
        <el-input
          type="textarea"
          v-model="model.templateContent"
          readonly
          show-word-limit
          class="templateContent"
          :rows="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="commit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Emit, Prop } from "vue-property-decorator";
import { State, namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { TemplateService } from "~/services/domain-service/template.service";
const CollectionExecutionModule = namespace("collection-execution");
import { UserService } from "~/services/management-service/user.service";
@Component({})
export default class SendMessage extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(UserService)
  private userService: UserService;

  @Dependencies(TemplateService)
  private templateService: TemplateService;
  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.State private accountCaseInfo;
  @CollectionExecutionModule.State private caseNo;
  @Prop({ required: true })
  private contactsData: any;

  private templateDataSet: any[] = [];

  private rules: any = {
    templateId: [{ required: true, message: "请选择模板" }]
  };
  private model: any = {
    templateId: "",
    templateContent: ""
  };

  @Emit("close")
  private close() {}

  private onTemplateContentChange(templateId) {
    const obj = this.templateDataSet.find(v => v.id === templateId);
    this.userService
      .getSmsTemplateByNote({
        caseId: this.caseId,
        templateId,
        caseNumber: this.caseNo,
        templateContent: obj && obj.templateContent,
        relationName: this.contactsData.contName
      })
      .subscribe(data => (this.model.templateContent = data.content));
  }

  private commit() {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;
      const request: any = {
        caseId: this.caseId,
        smsTemplateId: this.model.templateId,
        caseNumber: this.caseNo,
        // contIds: [this.contactsData.id],
        relationName: this.contactsData.contName,
        relation: this.contactsData.relation,
        relationPhone: this.contactsData.phone,
        id: this.contactsData.id
      };
      this.caseOperatorPageService.sendSms(request).subscribe(data => {
        this.$message.success("发送成功!");
        this.close();
      });
    });
  }

  private getMessageList() {
    this.userService
      .getSmsTemplate({ type: this.accountCaseInfo.overduePeriod })
      .subscribe(data => {
        this.templateDataSet = data;
      });
  }
}
</script>

<style scoped lang="less">
.component.send-message {
  .templateContent {
    width: 485px;
  }
}
</style>
